<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="mvvm">
        <title>Source | Kendo UI MVVM</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to use source binding in Kendo UI MVVM to set the HTML5 content of the target element by rendering a Kendo UI template with a View-Model value.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("framework/mvvm/bindings/source.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//framework/mvvm/bindings/source.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="source-binding"><a href="#source-binding">Source Binding</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/mvvm/source">Kendo UI Source (<code>source</code>) binding</a> sets the HTML content of the target element by rendering a Kendo UI template with a View-Model value. If the View-Model value changes, the HTML content of the target element is updated.</p>

<p>The template is specified by the <code>data-template</code> attribute of the element. The value of that attribute should be the value of the <code>id</code> of an existing <code>script</code> element which defines the Kendo UI template. If a template is not specified, a default template is used depending on the element tag name.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>The <code>source</code> binding does not support nesting widgets with source binding such as <code>treeview</code> with source binding to the view model. The nested widgets trigger a source change, which forces the root source binging to re-render its content, leading to infinitive loops. The proper way to nest widgets with source is to use the <code>data-source</code> attribute <a href="/controls/navigation/treeview/how-to/MVVM/multiple-treeviews-source-binding">demo</a>.</p>
</blockquote>

<h2 id="source-binding-to-array"><a href="#source-binding-to-array">Source Binding to Array</a></h2>

<h3 id="source-binding-to-root-elements"><a href="#source-binding-to-root-elements">Source Binding to Root Elements</a></h3>

<p>When the View-Model value is an array, the <code>source</code> binding iterates all array items and renders the template. The accumulated output of the template is set as the HTML content of the target element. The context inside the template is the current array item.</p>

<p>Adding or removing items from the array updates the HTML contents of the target element.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>A single root element should be used in the template when binding to an array. Having two first-level DOM elements is going to result in an erratic behavior.</p>
</blockquote>

<p>The example below is a correct instance of a template with a single root element.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-template="ul-template" data-bind="source: products"&gt;
&lt;/ul&gt;
&lt;script id="ul-template" type="text/x-kendo-template"&gt;
    &lt;li&gt;
        id: &lt;span data-bind="text: id"&gt;&lt;/span&gt;
    &lt;/li&gt;
&lt;/script&gt;
&lt;script&gt;
    var viewModel = kendo.observable({ products: [ { id: 1 }, { id: 2 }, { id: 3 } ] });
    kendo.bind($("ul"), viewModel);
&lt;/script&gt;
</code></pre>

<p>The example below is an unsupported instance of a template with multiple first-level DOM elements.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-template="ul-template" data-bind="source: products"&gt;
&lt;/ul&gt;
&lt;!-- Bindings will not work as expected --&gt;
&lt;script id="ul-template" type="text/x-kendo-template"&gt;
    &lt;li&gt; id: &lt;span data-bind="text: id"&gt;&lt;/span&gt; &lt;/li&gt;
    &lt;li&gt; details: &lt;span data-bind="text: id"&gt;&lt;/span&gt; &lt;/li&gt;
&lt;/script&gt;

&lt;script&gt;
    var viewModel = kendo.observable({ products: [ { id: 1 }, { id: 2 }, { id: 3 } ] });
    kendo.bind($("ul"), viewModel);
&lt;/script&gt;
</code></pre>

<h3 id="source-binding-to-array-of-objects"><a href="#source-binding-to-array-of-objects">Source Binding to Array of Objects</a></h3>

<blockquote>
<p><strong>Important</strong></p>

<p>Source binding requires the result set to be either an <a href="/api/javascript/data/observablearray"><code>ObservableArray</code></a> or a list of <a href="/api/javascript/data/observableobject"><code>ObservableObject</code></a> instances.</p>
</blockquote>

<h6>Example</h6>

<pre><code>&lt;ul data-template="ul-template" data-bind="source: products"&gt;
&lt;/ul&gt;
&lt;script id="ul-template" type="text/x-kendo-template"&gt;
    &lt;li&gt;
        id: &lt;span data-bind="text: id"&gt;&lt;/span&gt;
        name: &lt;span data-bind="text: name"&gt;&lt;/span&gt;
    &lt;/li&gt;
&lt;/script&gt;
&lt;script&gt;
var viewModel = kendo.observable({
    products: [
        { id: 1, name: "Coffee" },
        { id: 2, name: "Tea" },
        { id: 3, name: "Juice" }
    ]
});

kendo.bind($("ul"), viewModel);
&lt;/script&gt;
</code></pre>

<p>This example will output three <code>li</code> elements—one for every item in the <code>products</code> array.</p>

<p>The example below demonstrates the final output. Note that all <code>data</code> attributes are removed for clarity.</p>

<h6>Example</h6>

<pre><code>&lt;ul&gt;
    &lt;li&gt;
        id: &lt;span&gt;1&lt;/span&gt;
        name: &lt;span&gt;Coffee&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
        id: &lt;span&gt;2&lt;/span&gt;
        name: &lt;span&gt;Tea&lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
        id: &lt;span&gt;3&lt;/span&gt;
        name: &lt;span&gt;Juice&lt;/span&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h3 id="source-binding-to-array-of-primitive-objects"><a href="#source-binding-to-array-of-primitive-objects">Source Binding to Array of Primitive Objects</a></h3>

<p>If the array contains primitive objects, such as <code>Number</code>, <code>String</code>, and <code>Date</code>, the <code>this</code> reserved word should be used inside the template declaration to refer to the current item.</p>

<h6>Example</h6>

<pre><code>&lt;ul data-template="ul-template" data-bind="source: products"&gt;
&lt;/ul&gt;
&lt;script id="ul-template" type="text/x-kendo-template"&gt;
    &lt;li data-bind="text: this"&gt;&lt;/li&gt;
&lt;/script&gt;
&lt;script&gt;
var viewModel = kendo.observable({
    products: [ "Coffee", "Tea", "Juice" ]
});

kendo.bind($("ul"), viewModel);
&lt;/script&gt;
</code></pre>

<p>The example below demonstrates the final output. Note that all <code>data</code> attributes are removed for clarity.</p>

<h6>Example</h6>

<pre><code>&lt;ul&gt;
    &lt;li&gt;Coffee&lt;/li&gt;
    &lt;li&gt;Tea&lt;/li&gt;
    &lt;li&gt;Juice&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h2 id="source-binding-to-non-array-values"><a href="#source-binding-to-non-array-values">Source Binding to Non-Array Values</a></h2>

<p>The <code>source</code> binding also supports non-array values. In this case the specified template is applied by using the value of the View-Model field and the output is set as the HTML contents of the target element. The context inside the template will be the value of the View-Model field.</p>

<h6>Example</h6>

<pre><code>&lt;div data-template="div-template" data-bind="source: person"&gt;
    &lt;script id="div-template" type="text/x-kendo-template"&gt;
    Name: &lt;span data-bind="text: name"&gt;&lt;/span&gt;
    &lt;/script&gt;
&lt;/div&gt;
&lt;script&gt;
var viewModel = kendo.observable({
    person: {
        name: "John Doe"
    }
});

kendo.bind($("div"), viewModel);
&lt;/script&gt;
</code></pre>

<p>The example results in the output below. Note that all <code>data</code> attributes are removed for clarity.</p>

<h6>Example</h6>

<pre><code>&lt;div&gt;
    Name: &lt;span&gt;John Doe&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<h3 id="source-binding-to-datasource"><a href="#source-binding-to-datasource">Source Binding to DataSource</a></h3>

<p>The <code>source</code> binding to a Kendo UI DataSource instance can be used for Kendo UI widgets, which can normally be databound to a Kendo UI DataSource outside an MVVM scenario. This binding can also be used with elements, which are containers for items, such as <code>&lt;ul&gt;</code>, <code>&lt;table&gt;</code>, <code>&lt;select&gt;</code>, and others. In this case an item template must be defined via <code>data-template</code>.</p>

<p>The <code>source</code> binding does not work for plain HTML elements that are not meant to be bound to collections of data items, such as textboxes.</p>

<h6>Example</h6>

<pre data-lang="html"><code>    &lt;div id="example"&gt;
      &lt;p&gt;Kendo UI DropDownList&lt;/p&gt;
      &lt;select data-role="dropdownlist"
              data-bind="source: fruits"
              data-text-field="name"
              data-value-field="id"&gt;&lt;/select&gt;

        &lt;p&gt;Select&lt;/p&gt;
        &lt;select data-bind="source: fruits" data-template="select-template"&gt;&lt;/select&gt;

        &lt;script id="select-template" type="text/x-kendo-template"&gt;
            &lt;option value="#: id #"&gt;#: name #&lt;/option&gt;
        &lt;/script&gt;

        &lt;p&gt;Unordered list&lt;/p&gt;
        &lt;ul data-bind="source: fruits" data-template="list-template"&gt;
            &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;

        &lt;script id="list-template" type="text/x-kendo-template"&gt;
            &lt;li&gt;&lt;strong&gt;ID&lt;/strong&gt; #: id #, &lt;strong&gt;Name&lt;/strong&gt; #: name #&lt;/li&gt;
        &lt;/script&gt;

        &lt;p&gt;Table&lt;/p&gt;
        &lt;table&gt;
            &lt;thead&gt;&lt;th&gt;ID&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;/thead&gt;
            &lt;tbody data-bind="source: fruits" data-template="row-template"&gt;
                &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;script id="row-template" type="text/x-kendo-template"&gt;
            &lt;tr&gt;&lt;td&gt;#: id #&lt;/td&gt;&lt;td&gt;#: name #&lt;/td&gt;&lt;/tr&gt;
        &lt;/script&gt;
    &lt;/div&gt;

    &lt;script&gt;

      var viewModel = kendo.observable({
        fruits: new kendo.data.DataSource({
          data: [
            { id: 1, name: "Apples" },
            { id: 2, name: "Oranges" },
            { id: 3, name: "Bananas" }
          ],
          schema: {
            model: {
              fields: {
                id: { type: "number" },
                name: { type: "string" }
              }
            }
          }
        })
      });

      kendo.bind("#example", viewModel);

    &lt;/script&gt;

    &lt;style&gt;

        table {
            border-collapse: collapse;
        }

        table th,
        table td {
            border: 1px solid #999;
            padding: .3em .6em;
            text-align: left;
        }

    &lt;/style&gt;
</code></pre>

<h3 id="source-binding-to-view-model"><a href="#source-binding-to-view-model">Source Binding to View-Model</a></h3>

<p>If you want to use the View-Model itself, use the <code>this</code> reserved word, as shown below.</p>

<h6>Example</h6>

<pre><code>&lt;div data-template="div-template" data-bind="source: this"&gt;
    &lt;script id="div-template" type="text/x-kendo-template"&gt;
    Name: &lt;span data-bind="text: name"&gt;&lt;/span&gt;
    &lt;/script&gt;
&lt;/div&gt;
&lt;script&gt;
var viewModel = kendo.observable({
    name: "John Doe"
});

kendo.bind($("div"), viewModel);
&lt;/script&gt;
</code></pre>

<p>The output is exactly the same as in the previous case.</p>

<h6>Example</h6>

<pre><code>&lt;div&gt;
Name: &lt;span&gt;John Doe&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<h3 id="important-notes-on-non-array-source-binding"><a href="#important-notes-on-non-array-source-binding">Important Notes on Non-Array Source Binding</a></h3>

<h4>The this Keyword Conveys Different Meaning in Different Scenarios</h4>

<p>The <code>this</code> reserved keyword should:</p>

<ul>
<li>Be specified in the <code>source</code> binding if and only if the entire View-Model object is used as a value.</li>
<li>Be used inside a template only when the <code>source</code> binding is using an array of primitive objects.</li>
<li>Always be used on its own. The example below is not supported.</li>
</ul>

<h6>Example</h6>

<pre><code>&lt;div data-bind="text: this.bogus"&gt;&lt;/div&gt;

&lt;script id="bogus-template" type="text/x-kendo-template"&gt;
    &lt;span data-bind="text: this.bogus"&gt;&lt;/span&gt;
&lt;/script&gt;
</code></pre>

<h2 id="source-binding-of-select-elements"><a href="#source-binding-of-select-elements">Source Binding of select Elements</a></h2>

<p>When applied to a <code>select</code> element, the <code>source</code> binding creates <code>option</code> elements.</p>

<h3 id="select-source-binding-to-primitive-values"><a href="#select-source-binding-to-primitive-values">Select Source Binding to Primitive Values</a></h3>

<p>The example below demonstrates source binding of a <code>select</code> element to an array of primitive objects.</p>

<h6>Example</h6>

<pre><code>&lt;select data-bind="source: colors"&gt;&lt;/select&gt;
&lt;script&gt;
var viewModel = kendo.observable({
    colors: [ "Red", "Green", "Blue" ]
});

kendo.bind($("select"), viewModel);
&lt;/script&gt;
</code></pre>

<p>The <code>source</code> binding creates an <code>option</code> element for every item in the <code>colors</code> array and sets its HTML contents to the value of that item. This results in the output below.</p>

<h6>Example</h6>

<pre><code>&lt;select&gt;
    &lt;option&gt;Red&lt;/option&gt;
    &lt;option&gt;Green&lt;/option&gt;
    &lt;option&gt;Blue&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<h3 id="select-source-binding-to-non-primitive-values"><a href="#select-source-binding-to-non-primitive-values">Select Source Binding to Non-Primitive Values</a></h3>

<p>The <code>source</code> binding could also populate a <code>select</code> element from an array of non-primitive objects. The <code>data-text-field</code> and <code>data-value-field</code> attributes are used to specify how the value and content of the <code>option</code> elements are going to be bound.</p>

<p>The example below demonstrates source binding of a <code>select</code> element to an array of non-primitive values.</p>

<h6>Example</h6>

<pre><code>&lt;select data-text-field="name" data-value-field="id"
       data-bind="source: products"&gt;&lt;/select&gt;
&lt;script&gt;
var viewModel = kendo.observable({
    products: [
        { id: 1, name: "Coffee" },
        { id: 2, name: "Tea" },
        { id: 3, name: "Juice" }
    ]
});

kendo.bind($("select"), viewModel);
&lt;/script&gt;
</code></pre>

<p>This results in the output below.</p>

<h6>Example</h6>

<pre><code>&lt;select&gt;
    &lt;option value="1"&gt;Coffee&lt;/option&gt;
    &lt;option value="2"&gt;Tea&lt;/option&gt;
    &lt;option value="3"&gt;Juice&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>If the <code>data-text-field</code> and <code>data-value-field</code> attributes are not set and the <code>select</code> is bound to an array of non-primitive objects, the content of the <code>option</code> elements is set to <code>[object Object]</code>.</p>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on the Kendo UI MVVM component and bindings:</p>

<ul>
<li><a href="/framework/mvvm/overview">MVVM Overview</a></li>
<li><a href="/framework/mvvm/bindings/attr">Overview of the Attribute Binding</a></li>
<li><a href="/framework/mvvm/bindings/checked">Overview of the Checked Binding</a></li>
<li><a href="/framework/mvvm/bindings/click">Overview of the Click Binding</a></li>
<li><a href="/framework/mvvm/bindings/css">Overview of the CSS Binding</a></li>
<li><a href="/framework/mvvm/bindings/custom">Overview of the Custom Binding</a></li>
<li><a href="/framework/mvvm/bindings/disabled">Overview of the Disabled Binding</a></li>
<li><a href="/framework/mvvm/bindings/enabled">Overview of the Enabled Binding</a></li>
<li><a href="/framework/mvvm/bindings/events">Overview of the Events Binding</a></li>
<li><a href="/framework/mvvm/bindings/html">Overview of the HTML Binding</a></li>
<li><a href="/framework/mvvm/bindings/invisible">Overview of the Invisible Binding</a></li>
<li><a href="/framework/mvvm/bindings/style">Overview of the Style Binding</a></li>
<li><a href="/framework/mvvm/bindings/text">Overview of the Text Binding</a></li>
<li><a href="/framework/mvvm/bindings/value">Overview of the Value Binding</a></li>
<li><a href="/framework/mvvm/bindings/visible">Overview of the Visible Binding</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

